<!-- 这是个三级联动 -->
<template>
        <div>
            <mt-picker :slots="addressSlots" class="picker" @change="onAddressChange" :visible-item-count="5" ></mt-picker >
            上门服务地址:{{ addressProvince }} {{ addressCity }} {{addressXian}}  
        </div>
    </template>
<script>
    // 中国行政区划数据：省份、城市、区县、乡镇，省市区镇三级四级联动。
    // https://github.com/artiely/Administrative-divisions-of-China
    // import s from '../assets/js/address3'; //省市区
    const s = {
        '北京': {
            '市辖区': ['朝阳区', '海淀区', '东城区']
        },
        '广东': {
            '广州': ['44', '55', '66'],
            '深圳': ['朝阳', '22', '33']
        }
    }
    export default {
        name: 'address',
        data() {
            return {
                companyName: '',
                addressSlots: [{
                    flex: 1,
                    defaultIndex: 1,
                    values: Object.keys(s),
                    className: 'slot1',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot3',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot4'
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot5',
                    textAlign: 'center'
                }],
                addressProvince: '省',
                addressCity: '市',
                addressXian: '区',

            }
        },
        methods: {

            onAddressChange(picker, values) {

                if (!values[0]) {
                    return
                }
                let sheng = Object.keys(s);
                let shi = Object.keys(s[values[0]]);

                let index = shi.indexOf(values[1]);
                let xian = s[values[0]][values[1]];

                picker.setSlotValues(1, shi);
                this.addressProvince = values[0];
                this.addressCity = values[1];
                this.addressXian = values[2];
                if (!xian) {
                    return
                }

                picker.setSlotValues(2, xian);
            },



        },
        created() {

        },
        mounted() {
            console.log('mounted')
            this.$nextTick(() => {
                setTimeout(() => { //这个是一个初始化默认值的一个技巧
                    this.addressSlots[0].defaultIndex = 0;
                }, 100);
            });



        }
    }
</script>
<style lang="css" scoped>

</style>